<template>
  <div>
    <div class="columns">
      <oolongAutoComplete
        v-model="value1"
        :data="data1"
        @on-search="handleSearch1"
        placeholder="input here"
        style="width:200px"></oolongAutoComplete>

    </div>
    <br>
    <div class="columns">
      <oolongAutoComplete
        v-model="value2"
        @on-search="handleSearch2"
        placeholder="input here"
        style="width:200px">
        <oolongOption v-for="item in data2" :value="item" :key="item">{{ item }}</oolongOption>
      </oolongAutoComplete>

    </div>
    <br>
    <div class="columns">
      <oolongAutoComplete
        v-model="value4"
        icon="ios-search"
        placeholder="input here"
        style="width:300px">
        <div class="demo-auto-complete-item" v-for="(item,index) in data4" :key="index">
          <div class="demo-auto-complete-group">
            <span>{{ item.title }}</span>
            <a href="https://www.google.com/search?q=oolongView" target="_blank">更多</a>
          </div>
          <oolongOption v-for="option in item.children" :value="option.title" :key="option.title">
            <span class="demo-auto-complete-title">{{ option.title }}</span>
            <span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
          </oolongOption>
        </div>
        <a href="https://www.google.com/search?q=oolongView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
      </oolongAutoComplete>
    </div>
  </div>
</template>

<script>
export default {
  name: 'autocomplete',
  data() {
    return {
      value1: '',
      data1: [],
      value2: '',
      data2: [],
      value4: '',
      data4: [
        {
          title: '话题',
          children: [
            {
              title: 'oolongView',
              count: 10000

            },
            {
              title: 'oolongView UI',
              count: 10600

            }
          ]
        },
        {
          title: '问题',
          children: [
            {
              title: 'oolongView UI 有多好',
              count: 60100

            },
            {
              title: 'oolongView 是啥',
              count: 30010

            }
          ]
        },
        {
          title: '文章',
          children: [
            {
              title: 'oolongView 是一个设计语言',
              count: 100000

            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSearch1(value) {
      this.data1 = !value ? [] : [
        value,
        value + value,
        value + value + value
      ];
    },
    handleSearch2(value) {
      this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
        value + '@qq.com',
        value + '@sina.com',
        value + '@163.com'
      ];
    }
  }
}
</script>

<style scoped>

</style>
